<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			.div {
			    width: 300px;
			    border: 25px solid green;
			    padding: 25px;
			    margin: 25px;
				text-align: center;
				border-radius: 30px;
			}
			
			.border-box {
			    width: 300px;
			    /* border: 25px solid green; */
				border-style: solid;
				/* border-width: 10px;控制四个边框线 */
				border-top-width: 40px;
				border-bottom-width: 30px;
				border-left-width: 20px;
				border-right-width: 10px;
				border-top-style: dotted;
				border-top-color: red;
			    padding: 25px;
			    margin: 25px;
				text-align: center;
				box-sizing: border-box;
				
			}
			
			.login {
				width: 200px;
				height: 60px;
				background-image: url(../img/btn_login_p.png);
				background-size: 100% 100%;
				background-color: transparent;
				border: none;
				outline: none;
				margin-right: 30px;
			}
			
			.input {
				margin-left: 80%; /*以父标签的宽度或高度为参考*/
			}

		</style>
	</head>
	<body>
		<div class="div">
			哈哈
		</div>
		<div class="border-box">
			哈哈
		</div>
		<button class="login">
			
		</button>
		<input class="input" type="text" />
		<div style="width: 500px;background-color: red;">
			<input class="input" type="text" />
		</div>
		元素水平居中的第一种方式，不能指定宽度
		<div style="text-align: center;">
			<!-- <span>哈哈</span>
			<img src="../1.jpg" /> -->
			<form style="background-color: #0000FF;">
				<input type="text" />
			</form>
		</div>
		元素水平居中的第一种方式，元素的宽度必须指定
		<div>
			<form style="width: 100px;margin: auto;background-color: #0000FF;">
				<input type="text" />
			</form>
		</div>
		内联元素width无效，宽度由内容决定
		<span style="width: 100px;display: block;">全哈</span>
		<span>
			另一个
		</span>
		<div style="display: inline;">
			这是一个内联元素的div
		</div>
		<div>
			<div style="width: 100px;display: inline-block;background-color: #FF0000;">菜单1</div>
			<div style="width: 100px;display: inline-block;background-color: blue;">菜单2</div>
		</div>
		定位的元素有z-index，行号越大，值越大，当然也可以通过CSS修改
		<div style="height: 500px;">
			<img src="../img/btn_login_p.png" style="position: absolute;right: 100px;top: 0px;" />
		</div>
		<img src="../1.jpg" style="position: absolute;right: 100px;top: 0px;" />
		<button class="login">
			
		</button>
		<img src="../1.jpg" style="position: fixed;left: 100px;top: 0px;" />
		自身当前的位置为参考
		<img src="../1.jpg" style="position: relative;left: 100px;top: 0px;" />
	
		<div style="height: 100px;background-color: #00FFFF;overflow: auto;">
			<p>fjkdjkjjjjjjjjjjjjjjjjjjjjjj</p>
			<p>fjkdjkjjjjjjjjjjjjjjjjjjjjjj</p>
			<p>fjkdjkjjjjjjjjjjjjjjjjjjjjjj</p>
			<p>fjkdjkjjjjjjjjjjjjjjjjjjjjjj</p>
			<p>fjkdjkjjjjjjjjjjjjjjjjjjjjjj</p>
			<p>fjkdjkjjjjjjjjjjjjjjjjjjjjjj</p>
			<p>fjkdjkjjjjjjjjjjjjjjjjjjjjjj</p>
			<p>fjkdjkjjjjjjjjjjjjjjjjjjjjjj</p>
			<p>fjkdjkjjjjjjjjjjjjjjjjjjjjjj</p>
			<p>fjkdjkjjjjjjjjjjjjjjjjjjjjjj</p>
			<p>fjkdjkjjjjjjjjjjjjjjjjjjjjjj</p>
		</div>
		<ul>
			<li style="float: left;width: 100px;">菜单1</li>
			<li style="float: left;width: 100px;">菜单2</li>
			<li style="clear: both;"></li>
			<li style="float: left;width: 100px;">菜单3</li>
			<li style="float: left;width: 100px;">菜单4</li>
		</ul>
	</body>
</html>
